<template>
  <div class="main" ref="ref_main">
    <div class="content">
<!--      <div class="line" :style="{height: state.distanceTop + 'px', left: '100px', backgroundColor: 'red'}"></div>-->
<!--      <div class="line" :style="{height: state.distanceBottom + 'px', left: '200px', backgroundColor: 'blue'}"></div>-->
      <div class="empty">empty</div>
      <div class="empty">empty</div>
      <div class="scroll-main" ref="ref_scroll">
        <div class="scroll-content" ref="ref_content">
          <template v-for="(item, index) in ['scroll one','scroll two','scroll three']">
            <div class="scroll-item" ref="ref_items">
              <span>{{item}}</span>
              <img class="city" src="./imgs/city.svg" :style="{left: `calc((-100% + -5rem) * ${index})`}">
              <img class="truck" src="./imgs/truck.svg" :style="{left: `calc((-100% + -5rem) * ${index})`}">
            </div>
          </template>
        </div>
      </div>
      <div class="empty">empty</div>
      <div class="empty">empty</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, onMounted, reactive, ref} from "vue";

const {proxy} = getCurrentInstance()
const state: any = reactive({
  distanceTop: 0,
  distanceBottom: 0
})
const ref_main = ref()
const ref_scroll = ref()
const ref_content = ref()
const ref_items = ref()

const resize = () => {
  ref_scroll.value.style.height = `${ref_content.value.clientWidth}px`
  state.distanceTop = ref_scroll.value.offsetTop
  state.distanceBottom = state.distanceTop + ref_scroll.value.offsetHeight - (ref_content.value.clientHeight + ref_scroll.value.clientHeight - ref_content.value.clientWidth)
}
const move = () => {
  const scrollY = ref_main.value.scrollTop
  if (scrollY >= state.distanceTop && scrollY <= state.distanceBottom) {
    const offset = scrollY - state.distanceTop
    const items = ref_items.value
    for (let i = 0; i < ref_items.value.length; i++) {
      const disX = offset / (state.distanceBottom - state.distanceTop) * (ref_content.value.clientWidth - items[i].clientWidth)
      items[i].style.transform = `translateX(${-1 * disX}px)`
      items[i].getElementsByClassName('city')[0].style.transform = `translateX(${-1 * disX}px)`
      items[i].getElementsByClassName('truck')[0].style.transform = `translateX(${disX * 1.5}px)`;
      items[i].getElementsByClassName('city')[0].style.transform = `translateX(${disX * 0.5}px)`;
    }
  }
}
onMounted(() => {
  resize()
  window.addEventListener("resize", () => {
    resize()
  })
  ref_main.value.addEventListener("scroll", move)
})
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  background-color: #000000;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .line {
      width: 1px;
      background-color: red;
      position: absolute;
      z-index: 111;
    }
    .empty {
      width: 65rem;
      height: 40rem;
      background-color: #17f700;
      border-radius: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      font-size: 10rem;
      &:not(.scroll-main + .empty) {
        margin-top: 10rem;
      }
      &:last-child {
        margin-bottom: 10rem;
      }
    }
    .scroll-main {
      width: 65rem;
      padding: 10rem 0;
      position: relative;
      .scroll-content {
        width: max-content;
        display: flex;
        overflow: auto;
        position: sticky;
        top: 5rem;
        .scroll-item {
          background-color: #FFFFFF;
          border-radius: 2rem;
          width: 65rem;
          height: 40rem;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #000000;
          font-size: 10rem;
          position: relative;
          overflow: hidden;
          &:not(:first-child) {
            margin-left: 5rem;
          }
          >span {
            z-index: 11;
          }
          .city {
            position: absolute;
            bottom: 0;
            height: 100%;
            opacity: 0.7;
          }
          .truck {
            position: absolute;
            bottom: 0;
            height: 6rem;
          }
        }
      }
    }
  }
}
</style>
